<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-slide.js"></script>

</head>


<body>
    <style>
        body {
            height: 100%;
        }
    </style>


    <div class="goods-details-t" id='head'>
        <p class="aui-pull-left" onclick="closeWin()">
            <i class="fa fa-angle-left"></i>
        </p>
    </div>
    <!-- <p class="aui-pull-right" aui-popup-for="top-right">
        <i class="fa fa-ellipsis-h"></i>
    </p> -->

    <div class="aui-popup aui-popup-top-right" id="top-right">
        <div class="aui-popup-arrow"></div>
        <div class="aui-popup-content">
            <ul class="aui-list aui-list-noborder">
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-middle">
                        会员中心
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        会话消息
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                    </div>
                    <div class="aui-list-item-inner">
                        我的收藏
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- <img src="./images/goods-3.jpg" width="100%" style="margin-top:2rem;"> -->

    <div id="aui-slide">
        <div class="aui-slide-wrap" >
            <div class="aui-slide-node bg-dark">
                <img src="./images/l1.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="./images/l2.png" />
            </div>
            <div class="aui-slide-node bg-dark">
                <img src="./images/l3.png" />
            </div>
        </div>
        <div class="aui-slide-page-wrap"><!--分页容器--></div>
    </div>

    <script type="text/template" id="templateImage">
      <div class="aui-slide-wrap" >
        {{~it:value:index}}
          <div class="aui-slide-node bg-dark">
            <img src="{{=value.url}}" />
          </div>
        {{~}}
      </div>
      <div class="aui-slide-page-wrap"><!--分页容器--></div>
    </script>




    <div id="list">
        <div class="goods-details-price">
            ￥2650.00
            <p>市场价<del>￥3000.00</del></p>
        </div>
        <div class="goods-details-volume">
            销量：0
            <span>库存：173</span>
        </div>

        <ul class="goods-details-1">
            <li>
                <img src="./images/index-1-1.png"> 品牌自营
            </li>
            <li>
                <img src="./images/index-1-2.png"> 精挑优选
            </li>
            <li>
                <img src="./images/index-1-3.png"> 正品保证
            </li>
            <li>
                <img src="./images/index-1-4.png"> 售后无忧
            </li>
        </ul>

        <div class="goods-details-choice">
            <span>已选</span> 请选择
            <i class="fa fa-angle-right"></i>
        </div>
        <div class="goods-details-comment">
            <p>用户评价</p>
            好评率
            <span>100%</span>
            <div class="goods-details-comment-r">
                0人评论
                <i class="fa fa-angle-right"></i>
            </div>
        </div>
        <div class="goods-details-describe">
            <ul class="goods-details-describe-t">
                <li class="active">商品描述</li>
                <li>规格参数</li>
            </ul>
            <div class="goods-details-describe-d" onclick="miaoshu()">
                商品描述
            </div>
            <div class="goods-details-describe-d"  onclick="canshu()">
                规格参数
            </div>
            <div class="goods-details-describe-no">亲，此处没有内容</div>
        </div>

        <div class="goods-details-buy-t"></div>
        <div class="goods-details-buy">
            <div class="goods-details-buy-l" tapmode onclick="cart()">
                <i class="fa fa-shopping-cart"></i>
                <p>购物车</p>
            </div>
            <button class="goods-details-buy-btn-1">加入购物车</button>
            <button class="goods-details-buy-btn-2">立即购买</button>
        </div>

        <div class="goods-details-spec-bg">
            <div class="goods-details-spec">
                <div class="goods-details-spec-img">
                    <img src="./images/goods-3.jpg">
                    <p>选择颜色规格</p>
                    <div class="close"></div>
                </div>
                <ul class="goods-details-spec-m">
                    <li>
                    </li>
                    <li>

                    </li>
                </ul>

                <div class="goods-details-spec-d">
                    <div class="aui-pull-left">
                        选择数量
                    </div>
                    <div class="aui-pull-right">
                        <div class="jian"></div>
                        <input class="shu" type="text" value="1">
                        <div class="jia"></div>
                    </div>
                </div>
                <div class="goods-details-spec-buy">
                    <button class="goods-details-buy-spec-btn-1">加入购物车</button>
                    <button class="goods-details-buy-spec-btn-2" tapmode onclick="goodsorder()">立即购买</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 结束 -->

    <script type="text/template" id="template">
        <div class="goods-details-title">{{=it.info.title}}</div>
        <div class="goods-details-price">
            ￥{{=it.info.sell_price}}
            <p>市场价<del>￥{{=it.info.market_price}}</del></p>
        </div>
        <div class="goods-details-volume">
            销量：{{=it.info.sale}}
            <span>库存：{{=it.info.store}} {{=it.info.unit}}</span>
        </div>

        <ul class="goods-details-1">
            <li>
                <img src="./images/index-1-1.png"> 品牌自营
            </li>
            <li>
                <img src="./images/index-1-2.png"> 精挑优选
            </li>
            <li>
                <img src="./images/index-1-3.png"> 正品保证
            </li>
            <li>
                <img src="./images/index-1-4.png"> 售后无忧
            </li>
        </ul>

        <div class="goods-details-choice" onclick="choose()">
            <span>已选</span> 请选择
            <i class="fa fa-angle-right"></i>
        </div>
        <!-- <div class="goods-details-comment">
            <p>用户评价</p>
            好评率
            <span>100%</span>
            <div class="goods-details-comment-r">
                0人评论
                <i class="fa fa-angle-right"></i>
            </div>
        </div> -->
        <div class="goods-details-describe">
            <ul class="goods-details-describe-t">
                <li class="active" id='miaoshu' onclick="miaoshu()">商品描述</li>
                <!-- <li  id='canshu' onclick="canshu()">规格参数</li> -->
            </ul>
            {{? it.info.content==null}}
            <div class="goods-details-describe-no">亲，此处没有内容</div>
            {{??}}
            <div class="goods-details-describe-d" >
                {{=it.info.content}}
            </div>
            {{?}}
            <!-- <div class="goods-details-describe-d">
                规格参数
            </div> -->
            <!-- <div class="goods-details-describe-no">亲，此处没有内容</div> -->
        </div>

        <div class="goods-details-buy-t"></div>
        <div class="goods-details-buy">
            <div class="goods-details-buy-l" tapmode onclick="cart()">
                <i class="fa fa-shopping-cart"></i>
                <p>购物车</p>
            </div>
            <button class="goods-details-buy-btn-1"  onclick="choose()">加入购物车</button>
            <button class="goods-details-buy-btn-2" onclick="choose()">立即购买</button>
        </div>

        <div class="goods-details-spec-bg">
            <div class="goods-details-spec">
                <div class="goods-details-spec-img">
                    <img src="{{=it.info.image}}">
                    <p>选择颜色规格</p>
                    <div class="close" onclick="closegood()"></div>
                </div>
                <ul class="goods-details-spec-m" id='uldata'>
                    {{~it.specList:vo:index}}
                    <li id='li_list{{=vo.id}}'>
                        <p>{{=vo.name}}</p>
                        {{for(var j = 0; j < vo.value.length; j++) { }}
                        {{? vo.cur == vo.value[j]}}
                        <span class="active" id='shop{{=index}}{{=j}}' onclick="type_detail('shop{{=index}}{{=j}}','{{=vo.id}}')">{{=vo.value[j]}}</span>
                        {{??}}
                        <span onclick="type_detail('shop{{=index}}{{=j}}','{{=vo.id}}')"  id="shop{{=index}}{{=j}}">{{=vo.value[j]}}</span>
                        {{?}}
                        {{ } }} </li>
                        {{~}}
                </ul>

                <div class="goods-details-spec-d">
                    <div class="aui-pull-left">
                        选择数量
                    </div>
                    <div class="aui-pull-right">
                        <div class="jian" onclick="jian()"></div>
                        <input class="shu" type="text" value="1">
                        <div class="jia" onclick="jia()"></div>
                    </div>
                </div>
                <div class="goods-details-spec-buy">
                    <button class="goods-details-buy-spec-btn-1" tapmode onclick="shopcart(0)">加入购物车</button>
                    <button class="goods-details-buy-spec-btn-2" tapmode onclick="shopcart(1)">立即购买</button>
                </div>
            </div>
        </div>


    </script>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/aui-popup-new.js"></script>
</script>
<script type="text/javascript">


var data;
var dataAttribute;
var mall_id;

function currentFun(index) {

}


    var urlArray = new Array();
    var array = new Array();
    var idarray = new Array();

    apiready = function() {
        var id = api.pageParam.id;
        getData(id);
        mall_id= id;

    }

    function getData(id) {
      var userid = $api.getStorage('userid');

        api.ajax({
            url: webAddress + '/a/mall/Info/index',
            method: 'post',
            data: {
                values: {
                    id: id,
                    pro_id:0,
                    user_id:userid
                },
            },
            headers: {
                TOKEN: token
            }
        }, function(ret, err) {

            if (ret) {
                data = ret;
                var template = $api.byId('template');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret.result);
                var list = $api.byId('list');
                $api.html(list, html);

                //更换图片

                var template = $api.byId('templateImage');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret.result.info.images);
                var list = $api.byId('aui-slide');
                $api.html(list, html);


                var slide = new auiSlide({
                    container:document.getElementById("aui-slide"),
                    //"width":300, //宽度
                    "height":240, //高度
                    "speed":500, //速度
                    "autoPlay": 3000, //自动播放
                    "loop":true,//是否循环
                    "pageShow":true,//是否显示分页器
                    "pageStyle":'dot', //分页器样式，分dot,line
                    'dotPosition':'center', //当分页器样式为dot时控制分页器位置，left,center,right
                    currentPage:currentFun
                })
                $(".goods-details-describe-d").eq(0).show();

            } else {
                alert(JSON.stringify(err));
            }
        });
    }




function type_detail(obj,index) {
  var str = '#li_list'+index+' span';
  // alert(obj);
$(str).removeClass('active');
  $('#'+obj).addClass('active');
}


    function cart() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name: 'cart',
            url: './cart.html',
            bounces: false,
            delay: delay,
            slidBackEnabled: true,
            vScrollBarEnabled: false,
            progress: {
                type: "page"
            }
        });
    }

    function goodsorder() {
        var delay = 0;
        if (api.systemType != 'ios') {
            delay = 300;
        }
        api.openWin({
            name: 'goods_order',
            url: './goods_order.html',
            bounces: false,
            delay: delay,
            slidBackEnabled: true,
            vScrollBarEnabled: false,
            progress: {
                type: "page"
            }
        });
    }


    function choose() {
        $(".goods-details-spec-bg").show();

    }

    function closegood() {
        $(".goods-details-spec-bg").hide();

    }

    function jia() {
        $(".shu").val(parseInt($(".shu").val()) + 1);

    }

    function jian() {
        if ($(".shu").val() <= 1) {
            alert("不能小于1");
        } else {
            $(".shu").val(parseInt($(".shu").val()) - 1);
        }
    }

    function miaoshu() {
      $(".goods-details-describe-d").eq(0).show();
      $(".goods-details-describe-d").eq(1).hide();

      var canshu =$api.byId('canshu');
      $api.removeCls(canshu, 'active');

      var miaoshu =$api.byId('miaoshu');
      $api.addCls(miaoshu, 'active');

      // $api.byId('canshu').removeCls('active');
      // $api.byId('miaoshu').addCls('active');

    }

    function canshu() {
  $(".goods-details-describe-d").eq(1).show();
  $(".goods-details-describe-d").eq(0).hide();
  var miaoshu =$api.byId('miaoshu');
  $api.removeCls(miaoshu, 'active');

  var canshu =$api.byId('canshu');
  $api.addCls(canshu, 'active');
    }

    function shopcart(index) {

    var temp = $('#uldata li span.active').toArray();
    var key='';
    for (var i = 0; i < temp.length; i++) {
    key=key+i+':'+temp[i].innerText+','
    }
    key = key.substring(0,key.length-1);
// alert(key);
    var d = data.result.skuList;
    var value;
// console.log(JSON.stringify(d));
  for (var property in d){
  if (property==key){
    value = d[key];
  }
  }
  //获取货品id
  var products_id = value['products_id'];

  var userid = $api.getStorage('userid');
  var authtoken = $api.getStorage('authtoken');
  var qty =  $(".shu").val();

if (index==0) {
  addCart(userid,authtoken,qty,products_id);
}else {
  buyCart(userid,authtoken,qty,products_id);

}

}



function addCart(userid,authtoken,qty,products_id) {
  api.ajax({
  url: webAddress+'/a/mall/Mall/addCart',
  method: 'post',
  headers:{
    // 'Content-Type':'application/json',
      TOKEN: token,
      authuid: userid,
      authtoken: authtoken
    },
  data: {
      values: {
           mall_id: mall_id,
            pro_id:products_id,
             qty:qty,
      },

  }
},function(ret, err){
  if (ret) {
      api.toast({
      msg: ret.message,
      duration: 2000,
      location: 'bottom'
      });
  } else {
      api.toast({
      msg: err.body.message,
      duration: 2000,
      location: 'bottom'
      });
  }
});

}

function buyCart(userid,authtoken,qty,products_id) {

  api.ajax({
  url: webAddress+'/a/mall/Mall/buyCart',
  method: 'post',
  headers:{
      TOKEN: token,
      authuid: userid,
      authtoken: authtoken
    },
  data: {
      values: {
           mall_id: mall_id,
            pro_id:products_id,
             qty:qty,
      },
  }
},function(ret, err){
  if (ret) {
    console.log(JSON.stringify(ret));
      api.toast({
      msg: ret.message,
      duration: 2000,
      location: 'bottom'
      });


      api.openWin({
          name: 'goods_order',
          url: './goods_order.html',
          pageParam: {
              quick: ret.result
          }
      });


  } else {
      // alert( JSON.stringify( err ) );
      api.toast({
      msg: ret.message,
      duration: 2000,
      location: 'bottom'
      });
  }
});

}




    // $(".goods-details-choice, .goods-details-buy-btn-2").on('click', function() {
    //     $(".goods-details-spec-bg").show();
    // });
    // $(".close").on('click', function() {
    //     $(".goods-details-spec-bg").hide();
    // });
    // $(".jia").click(function() {
    //     $(".shu").val(parseInt($(".shu").val()) + 1);
    // })
    // $(".jian").click(function() {
    //     if ($(".shu").val() < 1) {
    //         alert("不能小于1");
    //     } else {
    //         $(".shu").val(parseInt($(".shu").val()) - 1);
    //     }
    // })
    // $(".goods-details-describe-d").eq(0).show();
    // $(".goods-details-describe-t li").eq(0).addClass("active");
    // $(".goods-details-describe-t li").mouseover(function() {
    //     $(".goods-details-describe-t li").removeClass("active");
    //     $(this).addClass("active");
    //     $(".goods-details-describe-d").hide();
    //     $(".goods-details-describe-d").eq($(this).index()).show();
    // })

    function closeWin() {
        api.closeWin({});
    }
</script>

</html>
